<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DJI无人机流媒体服务器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>DJI无人机流媒体服务器</h1>
            <nav>
                <button id="dashboard-tab" class="tab-button active">仪表板</button>
                <button id="streams-tab" class="tab-button">流管理</button>
                <button id="drones-tab" class="tab-button">无人机管理</button>
                <button id="test-tab" class="tab-button">播放测试</button>
                <button id="config-tab" class="tab-button">配置</button>
            </nav>
        </header>

        <main>
            <!-- 仪表板页面 -->
            <section id="dashboard" class="page active">
                <h2>服务器状态</h2>
                <div class="status-cards">
                    <div class="card">
                        <h3>RTMP服务器</h3>
                        <p>状态: <span id="rtmp-status">运行中</span></p>
                        <p>端口: <span id="rtmp-port">1937</span></p>
                    </div>
                    <div class="card">
                        <h3>HTTP服务器</h3>
                        <p>状态: <span id="http-status">运行中</span></p>
                        <p>端口: <span id="http-port">8002</span></p>
                    </div>
                    <div class="card">
                        <h3>活跃流</h3>
                        <p>数量: <span id="active-streams">0</span></p>
                    </div>
                </div>

                <h2>实时监控</h2>
                <div class="monitoring">
                    <canvas id="stream-chart" width="400" height="200"></canvas>
                </div>
            </section>

            <!-- 流管理页面 -->
            <section id="streams" class="page">
                <h2>流管理</h2>
                <div class="controls">
                    <button id="refresh-streams">刷新</button>
                </div>
                <table id="streams-table">
                    <thead>
                        <tr>
                            <th>流名称</th>
                            <th>类型</th>
                            <th>客户端IP</th>
                            <th>连接时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 动态填充流数据 -->
                    </tbody>
                </table>
            </section>

            <!-- 无人机管理页面 -->
            <section id="drones" class="page">
                <h2>无人机管理</h2>
                <div class="controls">
                    <button id="add-drone">添加无人机</button>
                    <button id="refresh-drones">刷新</button>
                </div>
                <table id="drones-table">
                    <thead>
                        <tr>
                            <th>无人机ID</th>
                            <th>名称</th>
                            <th>状态</th>
                            <th>源地址</th>
                            <th>连接时间</th>
                            <th>在线状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 动态填充无人机数据 -->
                    </tbody>
                </table>

                <!-- 添加无人机模态框 -->
                <div id="add-drone-modal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>添加无人机</h2>
                        <form id="add-drone-form">
                            <label for="drone-id">无人机ID:</label>
                            <input type="text" id="drone-id" required placeholder="例如: DJI001" oninput="updateRtmpUrl()">
                            
                            <label for="drone-name">无人机名称:</label>
                            <input type="text" id="drone-name" placeholder="例如: Mavic 3 Enterprise">
                            
                            <label for="rtmp-url">RTMP推流地址:</label>
                            <input type="text" id="rtmp-url" placeholder="rtmp://localhost:1937/live/drone1">
                            
                            <div style="margin: 10px 0; font-size: 12px; color: #666;">
                                <strong>提示:</strong> RTMP地址会根据无人机ID自动生成，也可以手动修改。支持RTMP和RTSP协议。
                            </div>
                            
                            <button type="submit">添加</button>
                        </form>
                    </div>
                </div>
            </section>

            <!-- 测试页面 -->
            <section id="test" class="page">
                <h2>流媒体播放测试</h2>
                
                <!-- 系统状态检查 -->
                <div class="test-section">
                    <h3>系统状态检查</h3>
                    <button onclick="checkSystemStatus()">检查系统状态</button>
                    <div id="systemStatus" style="display: none; margin: 10px 0; padding: 10px; border-radius: 4px;"></div>
                </div>
                
                <!-- HTTP-FLV 播放测试 -->
                <div class="test-section">
                    <h3>HTTP-FLV 播放测试</h3>
                    <input type="text" id="flvUrl" value="http://172.18.10.143:8002/live/DJ0001-1.flv" placeholder="输入FLV流地址" style="width: 400px; padding: 5px; margin: 5px;">
                    <br>
                    <div style="margin: 10px 0;">
                        <label>快速选择测试地址：</label>
                        <button onclick="setMainFlvUrl('http://172.18.10.143:8002/live/DJ0001-1.flv')" style="margin: 2px; padding: 5px 10px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">DJ0001-1</button>
                        <button onclick="setMainFlvUrl('http://172.18.10.143:8002/live/DJI001.flv')" style="margin: 2px; padding: 5px 10px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">DJI001</button>
                        <button onclick="setMainFlvUrl('http://localhost:8002/live/DJI001.flv')" style="margin: 2px; padding: 5px 10px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">localhost</button>
                    </div>
                    <button onclick="testFlvUrl()">测试FLV地址</button>
                    <button onclick="playFlv()">播放FLV</button>
                    <button onclick="stopFlv()">停止播放</button>
                    <div id="flvStatus" style="display: none; margin: 10px 0; padding: 10px; border-radius: 4px;"></div>
                    <video id="flvVideo" controls style="width: 100%; max-width: 640px; height: 360px; background: #000; margin: 10px 0;"></video>
                </div>
                
                <!-- 拉流状态检查 -->
                <div class="test-section">
                    <h3>拉流状态检查</h3>
                    <button onclick="checkStreams()">检查当前流状态</button>
                    <button onclick="checkDrones()">检查无人机状态</button>
                    <div id="streamsStatus" style="display: none; margin: 10px 0; padding: 10px; border-radius: 4px;"></div>
                </div>
            </section>
            <section id="config" class="page">
                <h2>服务器配置</h2>
                <form id="server-config-form">
                    <div class="config-section">
                        <h3>RTMP配置</h3>
                        <label for="rtmp-port">端口:</label>
                        <input type="number" id="rtmp-port-config" value="1937">
                        
                        <label for="chunk-size">块大小:</label>
                        <input type="number" id="chunk-size" value="60000">
                    </div>
                    
                    <div class="config-section">
                        <h3>HTTP配置</h3>
                        <label for="http-port">端口:</label>
                        <input type="number" id="http-port-config" value="8002">
                        
                        <label for="allow-origin">允许来源:</label>
                        <input type="text" id="allow-origin" value="*">
                    </div>
                    
                    <div class="config-section">
                        <h3>认证配置</h3>
                        <label for="api-user">API用户名:</label>
                        <input type="text" id="api-user" value="admin">
                        
                        <label for="api-pass">API密码:</label>
                        <input type="password" id="api-pass" value="admin">
                    </div>
                    
                    <button type="submit">保存配置</button>
                </form>
            </section>
        </main>

        <footer>
            <p>&copy; 2025 DJI无人机流媒体服务器. All rights reserved.</p>
        </footer>
    </div>

    <script src="flv.min.js"></script>
    <script src="script.js"></script>
</body>
</html>